<template>
	<div class="release_box">
        <div class="head">
            <p class="title">发布曝光</p>
            <p class="close" @click="close"><u-icon name="close" color="#fff" size="20"></u-icon></p>
        </div>
        <u--textarea v-model="content" placeholder="请输入曝光内容..." ></u--textarea>
        <!-- <input type="text" placeholder="请输入名字"> -->
        <div v-if="bgName" class="changeUser">
            <p>曝光人员</p>
            <p>{{bgName}}</p>
        </div>
        <div class="photo">
            <div class="img" v-for="(item,index) in imgList" :key="index">
                <img :src="item" alt="">
                <p class="close" @click="closeImg(index)">
                    <u-icon name="trash" color="#fff" size="18"></u-icon>
                </p>
            </div>
            <div class="add" @click="changeImg" v-if="imgList.length <= 6">
                <div class="mr" style="margin-right:0">
                    <img src="/static/photo.png" alt="">
                    <p>添加照片</p>
                </div>
                <!-- <p class="photo_num">{{imgList.length}} / 3</p> -->
            </div>
        </div>
        <p class="photo_num">{{imgList.length}} / 6</p>

        <div class="anniu_box">
            <u-button 
                @click="sendSubmit"
                :disabled="isDisable"
                loadingMode="circle"
                :loading="isDisable"
                loadingText="发布中..."
                type="primary" 
                text="发布"
            >
            </u-button>
            <u-checkbox-group
                v-model="checkboxValue"
                placement="column"
                activeColor="#23AC39"
                @change="checkboxChange"
            >
                <u-checkbox
                    :customStyle="{marginBottom: '8px'}"
                    label="已阅读并同意《免责声明》"
                >
                </u-checkbox>
            </u-checkbox-group>
        </div>
    </div>
</template>

<script>
    import { mapState ,mapActions} from 'vuex'
    import api from '@/api';
    import Config from '@/config/index.js'
	export default {
        options: {
            styleIsolation: 'shared'
        },
        props: {
			isRefresh: {
				type: Number,
				default: 0
			},
            bgName:{
                type:String,
            },
            memberId:{
                type:String,
            }
		},
        watch:{
            isRefresh:{
                handler(n,o){
                    if(n){
                        console.log("刷新了");
                        this.content = ''
                        this.imgList = []
                        this.isDisable = false
                        this.checkboxValue = []
                    }
                }
            }
        },
		data() {
			return {
                checkboxValue:[],
                imgList:[],
                content:'',
                isDisable:false
			}
		},
        computed: {
			...mapState({
                token: state => state.user.token
			})
		},
		methods: {
			
            close(){
                this.$emit('close',false)
            },

            sendSubmit(){
                if(!this.content){
                    this.$toast('请输入曝光内容!')
                    return
                }
                if(!this.checkboxValue.length){
                    this.$toast('请勾选免责声明!')
                    return
                }
                let data = {
                    pictureList:this.imgList.join(','),
                    content:this.content,
                }
                if(this.memberId){
                    data.memberId = this.memberId
                    data.memberName = this.bgName
                }
                this.isDisable = true
                uni.showLoading({title: '发布中...'})
                api.user.circle_add(data).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                        uni.hideLoading()
                        this.isDisable = false
                        this.$toast('发布成功～')
                        this.$emit('close',true)
                    }else{
                        uni.hideLoading()
                        this.isDisable = false
                        this.$toast(res.msg)
                    }
                })
            },

            checkboxChange(e){
                this.checkboxValue = e
            },

            // 选择图片
            changeImg(){
                if(this.imgList.length >= 5){
                    this.$toast('最多上传3张！')
                    return
                }
                let arr = []
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success :(res)=>{
                        uni.showLoading({title: '上传中...'})
                        console.log(res)
                        uni.uploadFile({
                            url: `${Config.apiUpload}`,
                            name: 'file',
                            method: 'POST',
                            filePath: res.tempFilePaths[0],
                            header: {
                                'Authorization': `Bearer ${this.token}`,
                            },
                            formData: {
                                file: res.tempFilePaths[0],
                            },
                            success: (res) => {
                                let returnData = JSON.parse(res.data)
                                arr.push(returnData.data)
                                this.imgList = this.imgList.concat(arr)
                                console.log(this.imgList)
                                uni.hideLoading()
                                this.$toast('上传成功！')
                            },
                            fail: (err) => {
                                uni.hideLoading()
                                this.$toast('上传失败，请重新上传！')
                            }
                        })
                    }
                })
            },

            closeImg(index){
                let arr = []
                arr = this.imgList
                arr.splice(index, 1)
                this.imgList = []
                this.imgList = arr
            },
		},
        mounted(){
            console.log('111')
        },
        onLoad() {
		},
		onShow(){
            console.log('222')
        }
	}
</script>

<style lang="scss" scoped>
    @mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.release_box{
        border-radius: 20rpx 20rpx 0px 0px;
        background: #f7f7f7;
        .head{
            height: 92rpx;
            background: #23AC39;
            padding:0 30rpx;
            border-radius: 20rpx 20rpx 0px 0px;
            @include content-flex(space-between);
            .title{
                font-size: 34rpx;
                font-weight: 500;
                color: #F7F7F7;
            }
        }
        /deep/ .u-textarea{
            height: 300rpx;
            background: #fff;
            padding:24rpx;
            font-size:28rpx;
            flex: inherit;
            border:none;
            -webkit-appearance: none;
            color: #000;
            textarea{
                height: 100% !important;
            }
        }
        .photo{
            margin:24rpx 28rpx 10rpx 28rpx;
            display: flex;
            flex-wrap:wrap;
            .add{
                .photo_num{
                    width: 220rpx;
                    font-size: 26rpx;
                    color: #999999;
                    text-align: center;
                }
            }
            .mr{
                width: 220rpx;
                height: 220rpx;
                border-radius: 12rpx;
                background: #FFFFFF;
                margin:0 16rpx 16rpx 0;
                flex-direction:column;
                @include content-flex(center);
                &:nth-child(3n){
                    margin-right:0;
                }
                img{
                    width: 64rpx;
                    height: 64rpx;
                    margin-bottom:4rpx;
                }
                p{
                    font-size: 24rpx;
                    color: #999999;
                }
            }
            .img{
                @extend .mr;
                position: relative;
                
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 12rpx;
                }
                .close{
                    width: 100%;
                    height: 50rpx;
                    background:rgba(0, 0, 0, 0.5);
                    position: absolute;
                    bottom:0;
                    left:0;
                    border-bottom-left-radius: 12rpx;
                    border-bottom-right-radius: 12rpx;
                    @include content-flex('center');
                    /deep/ .u-icon--right{
                        margin:0 auto;
                    }
                }
            }
        }
        .photo_num{
            font-size: 26rpx;
            color: #999999;
            margin:10rpx 0 30rpx 28rpx;
        }
        .anniu_box{
            margin:0 28rpx;
            text-align: center;
            /deep/ .u-button{
                height: 96rpx;
                line-height: 96rpx;
                border-radius: 100rpx;
                background: #23AC39;
                font-size: 32rpx;
                text-align: center;
                font-weight: 500;
                color:#fff;
                border:none;
            }
            /deep/ .u-checkbox{
                justify-content: center;
                margin-top:20rpx;
                text{
                    color:#999999 !important;
                    font-size: 26rpx !important;
                }
                .u-icon__icon{
                    color:#fff !important;
                }
                .u-checkbox__icon-wrap{
                    width: 32rpx !important;
                    height: 32rpx !important;
                }
            }
        }
    }
    .changeUser{
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding:30rpx;
        font-size:28rpx;
        background: #fff;
        border-top:1px solid #f5f5f5;
        p{
            color:#999;
        }
    }
</style>
